<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }">后台管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
      <el-breadcrumb-item>填写其他信息</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

    <el-steps :active="active" align-center >
      <el-step title="添加类别" description="选择商品类别" icon="el-icon-circle-plus" ></el-step>
      <el-step title="填写其他信息" description="填写其他商品信息"  icon="el-icon-edit"></el-step>
      <el-step title="添加图片" description="添加商品图片" icon="el-icon-picture"></el-step>
      <el-step title="提交" description="检查提交"  icon="el-icon-upload" ></el-step>
    </el-steps>

    <el-divider></el-divider>

      <el-upload
          action="http://localhost:8080/upload"
          name="pic"
          limit=4
          list-type="picture-card"
          :on-success="handleSuccess"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>

        <el-button type="warning" @click="backToPreStep()">上一步</el-button>
    <el-button type="primary" @click="insert()">下一步</el-button>


  </div>
</template>


<script>
export default {
  data() {
    return {
      ruleForm: {
        categoryId:"",
        categoryName:"",
        pressName:"",
        packName:"",
        pressId:"",
        packId:"",
        name:'',
        money:100,
        state:1,
        houseTime:"2022年10月",
        describe:'哈利波特1',
        num:20,
        sort:1,
        author:'J.K.罗琳',

      },
      active:3,
      urlArr:[],
      count:0,
      dialogImageUrl: '',
      dialogVisible: false,
      url:"",

    };
  },
  methods: {
    backToPreStep() {
      this.$router.push('goodsAddNew1');
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.ruleForm.categoryName=null;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
      this.axios.get("http://localhost:8080/remove?url="+this.url).then((response) => {
        this.$message("服务器删除完成")
        this.url="";
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSuccess(respose,file,fileList){
      this.url=respose;
      for (let i= this.count;i<this.count+1;i++){
        this.urlArr[i]=this.url;
        console.log(this.urlArr)
      }
      this.count+=1
    },
    insert(){
      if(this.url==""){
        this.$message.error("请选择图片")
        return;
      }
      let localRuleFormString = localStorage.getItem('ruleForm');
      let localRuleForm = JSON.parse(localRuleFormString);
      console.log(localRuleForm)
      let urlArr = JSON.stringify(this.urlArr);
      localStorage.setItem('urlArr', urlArr);
      console.log(this.ruleForm)
      console.log(this.urlArr)
     this.$router.push('goodsAddNew3')
    },
    loadLocalRuleForm() {
      let localRuleFormString = localStorage.getItem('urlArr');
      if (localRuleFormString) {
        let urlArr = JSON.parse(localRuleFormString);
        this.ruleForm = urlArr;
      }
    },
  },
  mounted() {
    this.loadLocalRuleForm();
  }
}
</script>

<style scoped>

</style>